
<script setup>
	
	import spellApi from '@/common/apis/spell';
	import { ref, computed, reactive } from 'vue';
	import workItem from './components/workitem.vue';
	import { getWordsList_api } from '@/common/apis/course';
	import selectWordCountPopup from './components/select-word-count-popup.vue';
	
	/** props */
	const props = defineProps(['id'])
	
	/** 词汇列表 */
	const vocabularylist = ref([]);
	
	/** 参数 */
	const reqdata = reactive({
		page: 1,
		ismore: true,
		pageSize: 50,
		courseId: props.id
	});
	
	/** 获取词汇列表 */
	const getlist = async () => {
		if(!reqdata.ismore) return false;
		const { list, perPage, total } = await spellApi.spelllist(reqdata);
		reqdata.page++
		vocabularylist.value = [...vocabularylist.value, ...list];
		if(list.length < perPage) reqdata.ismore = false;
	};
	
	/** 获取数据 */
	getlist();
	
	/** 上一次播放位置 */
	const lastIndex = ref(0);
	
	/** 播放结束 */
	const playEnd = () => {
		vocabularylist.value[lastIndex.value].play = false;
	};
	
	/** 监听自然结束 */
	uni.useAudio.onEnded(playEnd);
	
	/** 监听播放暂停 */
	uni.useAudio.onStop(playEnd);
	
	/** 播放词汇 */
	const onPlay = (item, index) => {
		playEnd();
		lastIndex.value = index;
		item.play = true;
		uni.useAudio.src(item.voiceFile?.url);
		
		if (!item.playWord) {
			/** 首次点击 */
			item.playWord = true;
			item.blockTranslation = false;
			
		} else {
			/** 二次点击 */
			item.playWord = false;
			item.blockTranslation = true;
		};
	};
	
	
	/** 是否自动选择 */
	const isAutoSelected = ref(false);
	
	/** 当前选择的数量 */
	const currentSelectCount = computed(() => vocabularylist.value.filter(item => item.selected).length);
	
	/** 加入/不加入 */
	const handleButton = (item, index) => {
		if (!('selected' in item) && currentSelectCount.value === 45) {
			uni.$fui.toast('最大选择45条哦~');
			return;
		};
		
		item.selected = !item.selected;
	};
	
	
	/** 选择数量弹窗 */
	const showSelectWordCountPopup = ref(false);
	
	/** 自动选择/取消选择 */
	const onAutoAndCancelSelect = () => {
		if (isAutoSelected.value || currentSelectCount.value === 45) {
			vocabularylist.value.forEach(item => delete item.selected);
			isAutoSelected.value = false;
			
		} else {
			if (currentSelectCount.value === 45) {
				uni.$fui.toast('最大选择45条哦~');
				return;
			};
			
			for (let index = 0; index < vocabularylist.value.length; index++) {
				vocabularylist.value[index].selected = true;
				if (index === 44) break;
			};
			
			isAutoSelected.value = true;
		};
	};
	
	/** 拼写记忆 */
	const toMemory = () => {
		const list = vocabularylist.value.filter(item => item.selected);
		uni.setStorageSync('_vocabulary-list', list);
		uni.navigateTo({
			url: '/pages/course/spell/memory'
		});
	};
	
	/** 选择数量弹窗确定按钮 */
	const selectWordCountPopupConfirm = pageSize => {
		wordCount.value = pageSize;
	};
	
	
</script>

<template>
	<view class="containerbox bgc-4d6d8a">
		<uv-navbar title="选择词汇" auto-back placeholder bg-color="#4d6d8a" left-icon-color="#fff" title-style="color:#fff" />
		<scroll-view scrollY class="containerbox px-30" @scrolltolower="getlist">
			<work-item
				:item="item"
				:index="index"
				:key="item.id"
				@on-play="onPlay(item, index)"
				v-for="item, index in vocabularylist"
				@on-select="handleButton(item, index)"
			/>
		</scroll-view>
		
		<view class="flex items-center justify-between bottombox">
			<view class="flex-1 text-26 text-white">已选择 <text class="mx-5 text-primary">{{ currentSelectCount }}</text> 个单词</view>
			<view class="btn bgc-warning" @tap="onAutoAndCancelSelect">{{ isAutoSelected || currentSelectCount === 45 ? '全部取消' : '自动选择' }}</view>
			<view class="btn bgc-gray transition-bg" :class="{ 'bgc-primary': currentSelectCount }" @tap="currentSelectCount && toMemory()">拼写记忆</view>
		</view>
		
		
		<select-word-count-popup v-model="showSelectWordCountPopup" @confirm="selectWordCountPopupConfirm" />
	</view>
</template>


<style scoped lang="scss">
	.transition-bg{transition: background-color .3s}
	.bottombox{padding: 20rpx 32rpx 24rpx}
	.bgc-4d6d8a{background-color: #4d6d8a}
	.btn{height: 80rpx;border-radius:12rpx;flex:1;text-align:center;line-height:80rpx;color:#fff;font-size:28rpx}
	.btn:last-child{margin-left: 20rpx}
</style>